<template>
  <div class="form-setting-panel">
    <!-- start 标题 -->
    <form-title-setting
      :disabled="true"
      :field="field"
      :mode="mode"
      :setting="setting"
      @input="updateForDom"
    ></form-title-setting>
    <!-- end 标题 -->

    <!-- start 描述信息 -->
    <form-help-tips
      :field="field"
      :mode="mode"
      @input="updateForDom"
    ></form-help-tips>
    <!-- end 描述信息 -->

    <!-- start 里程设置 -->
    <div class="form-setting-group form-setting-item">
      <h4 class="form-item-title">
        {{ $t('component.formActualMileage.mileageSetting') }}
        <el-tooltip :content="tooltipContent" placement="top">
          <i class="iconfont icon-question"></i>
        </el-tooltip>
      </h4>
      <div class="form-item-box" style="margin-top: 12px">
        <div class="connect">
          <div class="form-item-Select">
            <el-select
              style="width: 100%"
              v-model="StartValue"
              @change="StartChange"
              :placeholder="$t('common.placeholder.select')"
            >
              <el-option
                v-for="item in StartData"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
          <div class="form-item-Select">
            <el-select
              style="width: 100%"
              v-model="EndValue"
              @change="EndChange"
              :placeholder="$t('common.placeholder.select')"
            >
              <el-option
                v-for="item in EndDataObject"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
        </div>
        <el-checkbox
          v-model="defaultValueConfig.isNotModify"
          @change="update(defaultValueConfig, 'defaultValueConfig', true)"
          :true-label="1"
          :false-label="0"
          >{{ $t('common.base.tip.notAllowEdit') }}</el-checkbox
        >
      </div>
    </div>
    <!-- end 里程设置 -->

    <!-- start 校验 -->
    <div class="form-setting-group form-setting-item">
      <h4 class="form-item-title">{{ $t('common.base.check') }}</h4>
      <div class="form-item-box">
        <!-- 必填 -->
        <form-required-setting
          :field="field"
          @input="update"
        ></form-required-setting>
      </div>
    </div>
    <!-- end 校验 -->

    <!-- start 字段权限 -->
    <div
      class="form-setting-group form-setting-item"
      v-if="!isServiceProviderFlag"
    >
      <h4 class="form-item-title">{{ $t('common.base.fieldPermissions') }}</h4>
      <div class="form-item-box">
        <!-- 可见性 -->
        <form-visible-setting
          :field="field"
          @input="update"
        ></form-visible-setting>
        <!-- 支持高级搜索 -->
        <form-search-setting
          :field="field"
          @input="update"
        ></form-search-setting>
      </div>
    </div>
    <!-- end 字段权限 -->
  </div>
</template>

<script>
import SettingMixin from '@src/component/form/mixin/setting';
import { settingProps } from '@src/component/form/components/props';
/* enum */
import TableNameEnum from '@model/enum/TableNameEnum.ts';

export default {
  name: 'FormActualMileageSetting',
  mixins: [SettingMixin],
  props: settingProps,
  data() {
    return {
      StartValue: 1,
      StartData: [
        {
          value: 1,
          label: this.$t('task.setting.taskTypeSetting.flow.flowMap.accept.name')
        },
        {
          value: 3,
          label: this.$t('task.setting.taskTypeSetting.flow.flowMap.start.setOut'),
        },
        {
          value: 2,
          label: this.$t('task.setting.taskTypeSetting.flow.flowMap.start.name'),
        },
      ],
      EndValue: 1,
      EndData: [
        {
          value: 1,
          label: this.$t('task.setting.taskTypeSetting.flow.flowMap.start.name'),
        },
        {
          value: 2,
          label: this.$t('task.setting.taskTypeSetting.flow.flowMap.finish.name'),
        },
      ],
      // 里程设置
      tooltipContent: this.$t('component.formActualMileage.tooltipContent'),
    };
  },
  computed: {
    defaultValueConfig() {
      return this.field.setting.defaultValueConfig || {};
    },
    EndDataObject() {
      if (this.StartValue === 2) {
        // 开始选择 开始工单后，结束不能在选择开始工单
        if (this.EndValue === 1) {
          this.EndValue = 2;
        }
        return this.EndData.filter(item => {
          return item.value !== 1;
        });
      }
      return this.EndData;
    },
  },
  mounted() {
    // 里程数据回填与初始化
    let { setting } = this.field;
    if (!setting.defaultValueConfig && this.field.defaultSetting) {
      // setting 初始值赋值，只有拉第一次的时候生效
      for (let i in this.field.defaultSetting) {
        this.field.setting[i] = this.field.defaultSetting[i];
      }
    }
    if ('StartValue' in setting) {
      this.StartValue = setting.StartValue;
    } else {
      this.StartChange();
    }
    if ('EndValue' in setting) {
      this.EndValue = setting.EndValue;
    } else {
      this.EndChange();
    }
  },
  methods: {
    StartChange() {
      this.update(this.StartValue, 'StartValue', true);
    },
    EndChange() {
      this.update(this.EndValue, 'EndValue', true);
    },
    updateForDom(event) {
      let el = event.target;
      let prop = el.dataset.prop;
      let value = el.value;

      this.update(value, prop);
    },
    update(value, prop, isSetting = false) {
      this.$emit('input', { value, prop, isSetting });
    },
  },
};
</script>
<style lang="scss" scoped>
.form-item-Select {
  width: 100%;
  margin-bottom: 12px;
  &-title {
    margin-bottom: 6px;
  }
}
.connect {
  position: relative;
  padding-right: 12px;
  width: 100%;
}
.connect::before {
  content: '';
  position: absolute;
  width: 12px;
  height: 60%;
  border-right: 1px;
  border-top: 1px;
  border-bottom: 1px;
  border-left: 0;
  border-style: solid;
  border-color: #bfbfbf;
  right: 0;
  top: 16px;
}
::v-deep .el-select {
  width: 100%;
}
</style>
